<!DOCTYPE html>
<html>
<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a>首页管理</a>
        <a><cite>首页列表</cite></a>
    </div>
</div>
<style>
     ::before {
        margin-top: 10px !important;
    }
</style>

<body>

    <div class="layui-card-body">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>首页列表信息</legend>
        </fieldset>
        <table class="layui-hide" id="table-instance" lay-filter="table-instance"></table>

        <script type="text/html" id="table-useradmin-admin">
            <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
        </script>
    </div>


    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>首页视频</legend>
    </fieldset>
    <div id="video1">

    </div>

    <script>
        layui.use(['carousel', 'form', 'admin', 'element', 'useradmin', 'table', 'laydate', 'layedit', 'upload'], function() {
            var carousel = layui.carousel,
                $ = layui.$,
                setter = layui.setter,
                view = layui.view,
                table = layui.table,
                form = layui.form,
                elem = layui.element,
                admin = layui.admin,
                laydate = layui.laydate,
                upload = layui.upload
            layedit = layui.layedit;


            var video = "";

            //常规轮播
            var tar = carousel.render({
                elem: '#test1',
                arrow: 'always'
            });

            table.render({
                elem: "#table-instance", //表id
                url: setter.request.baseUrl + "/aboutus/admin/list",
                method: "get",
                headers: {
                    token: layui.data("layuiAdmin").token
                },
                response: {
                    statusName: "code",
                    statusCode: 0,
                    msgName: "msg",
                    countName: "count",
                    dataName: "list",
                },
                cols: [
                    [{
                        field: "id",
                        width: "5%",
                        title: "ID",
                        sort: true
                    }, {
                        field: "rotationImgs",
                        width: "8%",
                        title: "轮播图",
                        sort: true,
                        templet: "#rotationImgs"
                    }, {
                        field: "title",
                        title: "标题"
                    }, {
                        field: "content",
                        title: "关于我们内容"
                    }, {
                        field: "videoUrl",
                        title: "视频连接",
                        templet: "#videoUrl"
                    }, {
                        field: "createYear",
                        width: "7%",
                        title: "成立年份"
                    }, {
                        field: "solutionNum",
                        width: "8%",
                        title: "解决方案数量"
                    }, {
                        field: "partnerNum",
                        title: "合作单位数量"
                    }, {
                        field: "landSquare",
                        title: "占地"
                    }, {
                        fixed: "right",
                        title: "操作",
                        toolbar: "#table-useradmin-admin",
                        width: 150
                    }, ],
                ],
                done: function(res) {
                    var html
                    var url = res.list[0].videoUrl;
                    html = '<video width="100%" height="98%" controls autoplay>'
                    html += '<source src=' + url + '>'
                    html += '</video>'
                    $('#video1').append(html);
                },
                page: false,
            });

            //修改模块
            table.on("tool(table-instance)", function(obj) {
                var data = obj.data;
                if (obj.event === "edit") {
                    admin.popup({
                        title: "编辑用户",
                        area: ["800px", "900px"],
                        success: function(layero, index) {
                            view(this.id)
                                .render("/countpoint/countpointform", data)
                                .done(function() {
                                    let _data = data;
                                    form.render(null, "layuiadmin-app-form-list");
                                    layedit.set({
                                        uploadImage: {
                                            url: setter.request.baseUrl + "/upload/admin/file",
                                            type: 'post'
                                        }
                                    });
                                    var aa = layedit.build('demo', {
                                        width: 600
                                    });
                                    layedit.setContent(aa, _data.content, false)

                                    //显示已经有的轮播图
                                    var img = _data.rotationImgs.split(",")
                                    var del;
                                    for (var i = 0; i < img.length; i++) {
                                        if (img[i] == "") {
                                            del = i;
                                        } else {
                                            $('#showPic').append('<img src="' + img[i] + '"  class="layui-upload-img" style="max-width:100px;max-height:100px;padding-left:10px">' +
                                                '<i class="layui-icon layui-icon-close" style="margin-top:10px">' + '</i>'
                                            )
                                        }
                                    }
                                    // img.splice(del, 1);
                                    //添加新得轮播图
                                    var imgs = []
                                        //整合已经有的轮播图
                                    for (var i in img) {
                                        imgs.push(img[i]);
                                    }
                                    //多图片上传
                                    upload.render({
                                        elem: '#upload-img',
                                        url: setter.request.baseUrl + '/upload/admin/file',
                                        multiple: true,
                                        before: function(obj) {
                                            //预读本地文件示例，不支持ie8
                                            layer.msg('图片上传中...', {
                                                icon: 16,
                                                shade: 0.01,
                                                time: 0
                                            })
                                        },
                                        done: function(res) {
                                            layer.close(layer.msg()); //关闭上传提示窗口
                                            $('#showPic').append(
                                                '<img src="' + res.data.src + '"  class="file-iteme " style="max-width:100px;max-height:100px;padding-left:10px" >' +
                                                '<i class="layui-icon layui-icon-close" style="margin-top:10px">' + '</i>'
                                            )
                                            $(this.item).prev("div").children("input").val(res.data.src)
                                            $("#img-intsance").attr("src", res.data.src);
                                            imgs.push(res.data.src)
                                        }
                                    });
                                    $(document).on("click", ".layui-icon-close", function() {
                                        var ind = $("#showPic i").index(this)
                                        imgs.splice(ind, 1);
                                        console.log(ind)
                                        $("#showPic").empty();
                                        for (var i in imgs) {
                                            $('#showPic').append(
                                                '<img src="' + imgs[i] + '" class="file-iteme" style="max-width:100px;max-height:100px;padding-left:10px" >' +
                                                '<i class="layui-icon layui-icon-close" style="margin-top:10px">' + '</i>'
                                            )
                                        }
                                    });
                                    form.on("submit(LAY-user-front-submit)", function(data) {
                                        var field = data.field;
                                        field.rotationImgs = JSON.stringify(imgs).replace("[", "");
                                        field.rotationImgs = field.rotationImgs.replace("]", "");
                                        field.rotationImgs = field.rotationImgs.replace(/"/g, "");
                                        editUserHandle(Object.assign(_data, field));
                                        layer.close(index);
                                    });
                                });
                        },
                    });
                }
            });

            //编辑
            function editUserHandle(params) {
                //  debugger
                admin.req({
                    //*****************需要替换****************
                    url: setter.request.baseUrl + "/aboutus/admin/save",
                    data: JSON.stringify(params),
                    type: "post",
                    dataType: "json",
                    contentType: "application/json",
                    done: function(res) {
                        // layui.table.reload("table-instance");
                        if (res.msg == "success") {
                            window.location.reload();
                        } else {
                            layer.msg("数据异常")
                        }
                    },
                });
            }

            // 查看轮播图
            $(document).on("click", ".table-check-img", function(e) {
                var json = {
                    title: "审核图片",
                    id: 0,
                    start: 0,
                    data: [{
                        alt: "",
                        pid: 1,
                        src: $(e.target).data("img"), //原图地址
                        thumb: "",
                    }, ],
                };
                if (json.data[0].src == null) {
                    layer.msg("暂无图片", {
                        offset: "15px",
                        icon: "2",
                        time: 1000
                    })
                } else {
                    var result = json.data[0].src.split(",");
                    var j = new Array;
                    for (var i = 0; i < result.length; i++) {
                        let json = {
                            "src": result[i]
                        }
                        j[i] = json;
                    }
                    layer.photos({
                        photos: {
                            "data": j
                        },
                        anim: 1,
                    });
                }
            });
            // 查看视频
            $(document).on("click", ".table-check-video", function(e) {
                var json = {
                    title: "审核图片",
                    id: 0,
                    start: 0,
                    data: [{
                        alt: "",
                        pid: 1,
                        src: $(e.target).data("img"), //原图地址
                        thumb: "",
                    }, ],
                };
                //弹出层
                layer.open({
                    type: 1,
                    skin: 'layui-layer-rim', //加上边框
                    title: "视频预览",
                    content: json.data
                });
            });

        });

        layui.$('.layui-btn.layuiadmin-btn-admin').on('click', function() {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    </script>

    <script type="text/html" id="rotationImgs">
        <button type="button" class="layui-btn layui-btn-xs table-check-img" data-img="{{d.rotationImgs}}">查看图片</button>
    </script>


</body>

</html>